<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/swiper.jquery.min.js"></script>
        <link rel="stylesheet" href="css/mui.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/swiper.min.css">
    </head>
    <body>
      <div class="jzzf-mains">
        <div class="swiper-container con-top">
          <div class="swiper-wrapper">  
              <div class="swiper-slide slide-wz">
                <img src="img/hz-img11.png" class="slide-img">
              </div>
              <div class="swiper-slide slide-wz">
                <img src="img/b-tu2.png" class="slide-img">
              </div>
              <div class="swiper-slide slide-wz">
                <img src="img/b-tu1.png" class="slide-img">
              </div>                                            
          </div>  

          <div class="swiper-pagination swiper-paginations"></div><!--分页器-->
        </div>
        <div class="jzzf-dfk">
          <div class="jz-df-div">待付款（元）</div>
          <div class="jz-df-div2">35.5</div>
          <div class="jz-df-div3">剩余支付时间：00:15:00</div>
        </div>
        <div class="jzzf-hs"></div> 
        <ul class="jzzf-list">
          <li class="li1">选择付款方式</li>
          <li class="li2">
            <img src="img/hz-img8.png" class="li2-img">
            <span class="li2-span">微信支付</span>
            <img src="img/hz-img12.png" class="li2-img2">
          </li>
          <li class="li2">
            <img src="img/hz-img14.png" class="li2-img">
            <span class="li2-span">余额支付（当前余额0元）</span>
            <img src="img/hz-img15.png" class="li2-img2">
          </li>          
        </ul> 
        <div class="jzzf-but">
          <div class="but-div">确认支付</div>
        </div>       
      </div>
    </body>
</html>
<script>
    var mySwiper = new Swiper('.swiper-container', {  
        direction: 'horizontal',  
        loop: true, 
        autoplay: 5000,//自动轮播  
        speed: 600,  
        autoplayDisableOnInteraction : false,
        // 如果需要分页器  
        pagination: '.swiper-pagination',  
        paginationType: 'custom',//这里分页器类型必须设置为custom,即采用用户自定义配置  
        //下面方法可以生成我们自定义的分页器到页面上  
        paginationCustomRender: function(swiper, current, total) {  
            var customPaginationHtml = "";  
            for(var i = 0; i < total; i++) {  
                //判断哪个分页器此刻应该被激活  
                if(i == (current - 1)) {  
                    customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';  
                } else {  
                    customPaginationHtml += '<span class="swiper-pagination-customs"></span>';  
                }  
            }  
            return customPaginationHtml;  
        }  
    })
</script>
